<template>
  <div>
    <input type="text" v-model="user.id" />
    <input type="text" v-model="user.name" />
    <button @click="handleSubmit">提交</button>
    <p>{{ user.id }} -- {{ user.name }}</p>
    <button @click="handleClick">输出数据</button>
    <ul>
      <li v-for="(item, index) in o.arr" :key="item.id" @click="handleDel(index)">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    const o = reactive({
      arr: [
        {
          id: 0,
          name: 'ifer',
        },
        {
          id: 1,
          name: 'elser',
        },
        {
          id: 2,
          name: 'xxx',
        },
      ],
    })
    const handleDel = (index) => {
      o.arr.splice(index, 1)
    }
    // 不包肯定这个数据不是响应式的，数据肯定变了
    const user = {
      id: '',
      name: '',
    }
    const handleSubmit = () => {
      // 由于 o.arr.push 的操作是响应式的，所以视图会更新，那么视图更新的时候 user 的数据已经变了，捎带着一块更新了
      o.arr.push({
        ...user,
      })
      user.id = ''
      user.name = ''
    }

    const handleClick = () => {
      console.log(user)
    }
    return {
      o,
      handleDel,
      user,
      handleSubmit,
      handleClick,
    }
  },
}
</script>
